<template>
    <div class="app-container" ref="content">
        <div style="text-align: center;padding: 10px;font-size: 24px">角色《{{roleInfo.name}}》-详情信息</div>
        <el-row :gutter="10">
            <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
                <div class="content-title">角色基本信息</div>
                <div class="flex-form-main">
                <el-form :model="roleInfo"  ref="roleInfo"  label-width="100px" style="text-align: center">
                    <el-form-item label="角色名称" prop="name">
                        {{roleInfo.name}}
                    </el-form-item>
                    <el-form-item label="角色编码"  prop="code">
                        {{roleInfo.code}}
                    </el-form-item>
                    <el-form-item label="角色描述" prop="remark">
                        {{roleInfo.remark}}
                    </el-form-item>
                    <el-form-item label="当前状态 " prop="isUse">
                        {{roleInfo.isUse? '可用':'不可用'}}
                    </el-form-item>
                </el-form>
                </div>

            </el-col>
            <el-col :xs="24" :sm="24" :md="16" :lg="16" :xl="16">
                <div class="text-center margin-bottom10" style="font-size: 20px">角色可操作资源</div>
                <div style="display: flex;justify-content: center;">
                    <el-tree  :data="roleInfo.inPermissionVos" default-expand-all node-key="id" ref="tree"
                              highlight-current :props="defaultProps" style="text-align: center">
                    </el-tree>
                </div>
            </el-col>

        </el-row>
    </div>
</template>

<script>
import {getInRoleVo} from "@/api/role";

export default {
    name: "info",
    data(){
        return{
            roleInfo:{

            },
            permissionData:[],
            defaultProps: {
                children: 'children',
                label: 'name'
            },
        }
    },
    created() {
        this.$nextTick(() => {
            this.getInRoleVo(this.$route.query.ucId)
        });
    },
    methods:{
        getInRoleVo(val){
            //获取企业信息数据
            let loadingInstance = this.$loading({
                target:this.$refs.content,
                text:'数据加载中'
            });
            getInRoleVo({ucId:val,remove:false}).then(res=>{
                console.log(res)
                this.roleInfo = res.data
                loadingInstance.close()
                this.$notify.success({
                    title: '成功',
                    message: "获取角色信息成功"
                })
            }).catch(error=>{
                console.log(error)
                loadingInstance.close()
                this.$notify.error({
                    title: '失败',
                    message: "获取角色信息失败"
                })
            })
        },
        //时间格式化
        dateFormat:function(row,column){
            var t=new Date(row.updateTime);//row 表示一行数据, updateTime 表示要格式化的字段名称
            return t.getFullYear()+"-"+(t.getMonth()+1)+"-"+t.getDate()+" "+t.getHours()+":"+t.getMinutes()+":"+t.getSeconds()+"."+t.getMilliseconds();
        },
    }

}
</script>

<style scoped>
.flex-form-main{
    display: flex;
    justify-content: center;
}
.content-title{
    font-size: 20px;
}

</style>